@include('Admin.public.head')

<body>
@include('Admin.public.menu')

<div class=" admin-content" id="app">
    {{csrf_token()}}
    <div class="daohang">

    </div>
    <!--添加模态框-->
    <div class="am-popup am-popup-inner" id="my-popup1">
        <div class="am-popup-hd">
            <h4 class="am-popup-title">反馈截图</h4>
            <span data-am-modal-close
                  class="am-close">&times;</span>
        </div>
        <div class="am-popup-bd">
            <div class="am-form-group am-cf">
                <img v-for="val,index in imgData" :src="val.feedback_img" width="300" class="am-img-thumbnail">
            </div>
        </div>

    </div>

    <div class="admin-biaogelist">
        <div class="listbiaoti am-cf">
            <ul class="am-icon-flag on"> 问题反馈</ul>
            <dl class="am-icon-home" style="float: right;"> 当前位置： 首页 > <a href="#">问题反馈</a></dl>
        </div>
        <form class="am-form am-g">
            <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
                <thead>
                <tr class="am-success">
                    <th>ID</th>
                    <th>用户</th>
                    <th>电话</th>
                    <th>标题</th>
                    <th>内容</th>
                    <th>反馈截图</th>
                    <th>我的回复</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="val,index in FeedbackList">
                    <td>@{{ val.id }}</td>
                    <td>@{{ val.user_name }}</td>
                    <td>@{{ val.phone }}</td>
                    <td>@{{ val.title }}</td>
                    <td>@{{ val.content }}</td>
                    <td><a type="button"
                           data-am-modal="{target: '#my-popup1', closeViaDimmer: 1, width: 400, height: 800}"
                           v-on:click="find(val.id)" class="am-btn am-btn-default am-btn-xs am-text-secondary am-round">查看截图</a>
                    </td>
                    <td>@{{ val.answer }}</td>
                    <td>@{{ val.created_at}}</td>
                    <td>
                        <div class="am-btn-toolbar">
                            <div class="am-btn-group am-btn-group-xs">
                                <a class="am-btn am-btn-primary am-radius" v-on:click="resetPass(val.id)" title="回复">回复</a>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>

            <ul class="am-pagination am-fr">
                <div class="block">
                    <el-pagination
                            background
                            :page-size="PagesData.per_page"
                            :current-page="PagesData.current_page"
                            layout="total , prev, pager, next"
                            :total="PagesData.total"
                            @prev-click="changeClick"
                            @next-click="changeClick"
                            @current-change="changeClick">
                        >
                    </el-pagination>
                </div>
            </ul>
        </form>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    FeedbackList: [],
                    PagesData: [],//分页
                    imgData: {},
                },

                //事件
                methods: {
                    //选择当前页
                    changeClick:function(e){
                        var rico = this
                        $.get("/admin/feedback/feedback",{'_token':'{{csrf_token()}}',page:e},function (res) {
                            if(res.code){
                                app.FeedbackList = res.data.data
                                app.PagesData = res.data
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },
                    initialize: function () {
                        $.post("/admin/feedback/feedback", {'_token': '{{csrf_token()}}'}, function (res) {
                            if (res.code) {
                                app.FeedbackList = res.data.data
                                app.PagesData = res.data
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },
                    resetPass:function(id){
                        layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
                            // console.dir(text);return
                            $.post("/admin/feedback/reply", {'_token': '{{csrf_token()}}','id':id,'data':text}, function (res) {
                                if (res.code) {
                                    layer.msg(res.data);
                                    layer.close(index);
                                } else {
                                    layer.msg(res.data);
                                }
                            });
                        });

                    },

                    //查询
                    find: function (id) {
                        $.post("/admin/feedback/find", {'_token': '{{csrf_token()}}', 'fid': id}, function (res) {
                            if (res.code) {
                                app.imgData = res.data
                                console.log(app.imgData);
                            }
                        });
                    }
                },
                //自动执行
                mounted: function () {
                    this.initialize();//分公司
                },
            })
        </script>
@include('Admin.public.foot')